<template>
  <base-dialog :close-on-click-modal="false" title="更改设备地理位置信息" :show-fullscreen-icon="false" :visible.sync="dialog.visible" append-to-body width="60%" @open="onDialogOpen" @updateData="submitForm">
    <el-form ref="form" :model="deviceLocation" label-width="120px">
      <el-row>
        <el-col :span="11">
          <el-form-item label="经度" prop="longitude" :rules="{ required: true, message: '设备经度不能为空', trigger: 'blur' }">
            <el-input v-model="deviceLocation.longitude" placeholder="请输入经度" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="纬度" prop="latitude" :rules="{ required: true, message: '设备纬度不能为空', trigger: 'blur' }">
            <el-input v-model="deviceLocation.latitude" placeholder="请输入纬度" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="display: flex; justify-content: center">
        <el-col :span="24">
          <map-edit :device-location="deviceLocation" class="map" @locationChange="locationChange" />
        </el-col>
      </el-row>
    </el-form>
  </base-dialog>
</template>

<script>
import { getDeviceLocationByDeviceIdentification, editDeviceLocation } from '@/api/cms/winglinks/deviceLocation'
import mapEdit from './mapEdit'
export default {
  name: 'EditDeviceLocation',
  components: { mapEdit },
  props: {
    dialog: {
      type: Object,
      default() {
        return {
        }
      }
    }
  },
  data() {
    return {
      deviceLocation: {
        longitude: undefined,
        latitude: undefined,
        deviceIdentification: undefined
      }
    }
  },
  mounted() {
  },
  methods: {
    onDialogOpen() {
      this.getDeviceLocation()
    },
    getDeviceLocation() {
      if (this.dialog.deviceIdentification) {
        getDeviceLocationByDeviceIdentification(this.dialog.deviceIdentification).then(res => {
          this.deviceLocation = res.data
        })
      }
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.deviceLocation.id != null) {
            editDeviceLocation(this.deviceLocation).then((response) => {
              this.notifiySuccess('修改成功')
              this.dialog.visible = false
            })
          }
        }
      })
    },
    locationChange(centerLocation) {
      this.deviceLocation.longitude = centerLocation.longitude
      this.deviceLocation.latitude = centerLocation.latitude
    }
  }
}
</script>

<style lang="scss" scoped>
  .map{
    height: 100%;
    min-height: 500px;
    width: 100%;
    padding: 10px 10px;
  }
</style>
